<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="查看" name="first">
        <el-form ref="form" :model="form" label-width="100px">

          <el-form-item label="维护编号">
            <el-input v-model="form.id" size="mini" readonly=true></el-input>
          </el-form-item>

          <el-form-item label="开始时间">
            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              placeholder="选择日期时间"
              size="mini"
              value-format="yyyy-MM-dd HH:mm:dd">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="结束时间">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="选择日期时间"
              size="mini"
              value-format="yyyy-MM-dd HH:mm:dd">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="描述">
            <el-input v-model="form.description" size="mini"></el-input>
          </el-form-item>

          <el-form-item label="服务端版本">
            <el-input v-model="form.serverVersion" size="mini" readonly=true></el-input>
          </el-form-item>

          <el-form-item label="客户端版本">
            <el-input v-model="form.clientVersion" size="mini" readonly=true></el-input>
          </el-form-item>

          <el-form-item label="创建时间">
            <el-input v-model="form.createTime" size="mini" readonly=true></el-input>
          </el-form-item>

          <el-form-item v-if="isMaintain">
            <el-button type="primary" @click="onUpdate">更新</el-button>
            <el-button type="primary" @click="onClose">关闭维护</el-button>
          </el-form-item>

        </el-form>
      </el-tab-pane>
      <el-tab-pane label="添加修改" name="second">

        <el-form ref="form" :model="formAdd" label-width="100px">

          <el-form-item label="开始时间">
            <el-date-picker
              v-model="formAdd.startTime"
              type="datetime"
              placeholder="选择日期时间"
              size="mini"
              value-format="yyyy-MM-dd HH:mm:dd">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="结束时间">
            <el-date-picker
              v-model="formAdd.endTime"
              type="datetime"
              placeholder="选择日期时间"
              size="mini"
              value-format="yyyy-MM-dd HH:mm:dd">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="描述">
            <el-input v-model="formAdd.description" size="mini"></el-input>
          </el-form-item>

          <el-form-item label="服务端版本">
            <el-input v-model="formAdd.serverVersion" size="mini"></el-input>
          </el-form-item>

          <el-form-item label="客户端版本">
            <el-input v-model="formAdd.clientVersion" size="mini"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>
        </el-form>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data () {
      return {
        form: {
          id: '',
          startTime: '',
          endTime: '',
          description: '',
          serverVersion: '',
          clientVersion: '',
          createTime: '',
          off: ''
        },
        formAdd: {
          startTime: '',
          endTime: '',
          description: '',
          serverVersion: '',
          clientVersion: ''
        },
        isMaintain: false,
        activeName: 'first'
      }
    },
    methods: {
      getLastMaintain () {
        let that = this
        this.$axios({
          method: 'get',
          url: 'api/AuthService.getLastMaintain'
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            if (!resp.data.data) {
              that.$message({
                showClose: true,
                message: '暂无维护',
                type: 'success'
              })
              that.activeName = 'second'
            } else {
              resp.data.data.startTime = moment.utc(resp.data.data.startTime).zone(-8).format('YYYY-MM-DD HH:mm:ss')
              resp.data.data.endTime = moment.utc(resp.data.data.endTime).zone(-8).format('YYYY-MM-DD HH:mm:ss')
              resp.data.data.createTime = moment.utc(resp.data.data.createTime).zone(-8).format('YYYY-MM-DD HH:mm:ss')
              that.form = resp.data.data
              that.isMaintain = true
            }
          }
        })
      },
      init () {
        this.getLastMaintain()
      },
      onSubmit () {
        let that = this
        this.$axios({
          method: 'get',
          url: 'api/AuthService.addMaintain',
          params: this.formAdd
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.$message({
              showClose: true,
              message: '添加成功',
              type: 'success'
            })
            that.init()
          } else {
            that.$message({
              showClose: true,
              message: resp.data.cause,
              type: 'success'
            })
          }
        })
      },
      onUpdate () {
      },
      onClose () {
      }
    },
    mounted () {
      this.init()
    }
  }
</script>
